<template>
 <div class="main clearfix">
   <div class="classList f_l" v-for="(item,index) in classList"  :key="item.class_id" style="width: 50%">
   <Row >
     <i-col span="11">
       <Card >
         <p slot="title">{{item.class_name}}</p>
         <p>班级描述：{{item.desc}}</p>
         <p>创建时间：{{item.create_time | toDateString }}</p>
         <p style="margin-top: 20px;display: flex;width: 100%;justify-content: space-around">
           <i-button type="info" shape="circle"  @click="editeClass(index)" v-if="user.isAdmin">修改</i-button>
           <i-button type="error" shape="circle" @click="deleteClass(index)" v-if="user.isAdmin">删除</i-button>
         </p>
       </Card>
     </i-col>
   </Row>
   </div>
   <Modal v-model="isEdite" width="600"
          title="修改班级"
          @on-ok="ok"
   >
     <div>
       <span>班级名称：</span>
       <Input v-model="currentEdit.class_name" placeholder="请输入班级名称" required></Input>
     </div>
     <div style="margin-top: 20px">
       <span>班级描述：</span>
       <Input v-model="currentEdit.desc" placeholder="请输入班级描述" required></Input>
     </div>
   </Modal>
 </div>

</template>
<script>
import api from '../../api/index.js'
import {mapState} from 'vuex';
export default {
  name: "employeeList",
    data () {
      return{
      classList:[],
        isEdite:false,//是否修改班级
        currentEditClassIndex:null,//当前修改的索引
        currentEdit:{
          class_name:null,
          desc: null,
          class_id: null
        }
      }
        },
  computed:{
    ...mapState([
       'user',
     ])
  },
  filters:{
    toDateString: (date)=>{
      let d  = new Date(date);
      let y  = d.getFullYear();
      let m = d.getMonth()+1;
      let day = d.getDate();
      let h = d.getUTCHours();
      let min = d.getUTCMinutes();
      return `${y}年-${m}月-${day}日-${h}时-${min}分`;
    }
  },
  mounted() {
    api.getClassListByCreater(this.user.user_number).then(res=>{
      if(res.status==1){
        this.classList=res.data;
        console.log(res.data);
      }
    })
        },
  methods: {
    //修改班级
    editeClass(index){
      this.isEdite=true;
      this.currentEditClassIndex=index;
      this.currentEdit=this.classList[this.currentEditClassIndex];
    },
    //确认修改班级
    ok(){
      let data = {
        class_name:this.currentEdit.class_name,
        desc:this.currentEdit.desc,
        classId:this.currentEdit.class_id
      };
      api.updateClass(data).then(res=>{
        if(res.status==1){
          this.$Message.success('修改班级成功');
          this.isEdite=false;
          this.classList[this.currentEditClassIndex]= this.currentEdit;
        }else {
          this.$Message.error('修改班级失败')
        }
      })
    },
    deleteClass(index){
      console.log(this.classList[index]);
      api.deleteClass(this.classList[index].class_id).then(res=>{
        if(res.status){
          this.$Message.success('你已经成功删除该班级');
          //本地数据删除
          this.classList.splice(index,1);
        }
      })
    }
        },
};
</script>

<style lang='scss' scoped>
  .f_r{
    float: right;
  }
  .f_l{
    float: left;
  }
  .clearfix:after{
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
  .clearfix{
    zoom: 1;/*兼容IE游览器*/
  }
 .detail{
   color: #333;
   width: 100%;
   div{
     margin: 6px 0;
     display: flex;
     align-items: center;
     .left{
       text-align: right;
       flex: 16% 0;
       color: #666;
       font-size: 18px;
       margin-right: 2%
     }
     .right{
       flex: 1;
       font-size: 18px;
     }
   }
 }
 .ivu-form-item{
   margin-bottom: 10px;
 }
  .editer{
    width: 100%;
    height:calc(100% - 65px);
    position: fixed;
    left: 0;
    top: 65px;
    background-color: rgba(0,0,0,.65);
    padding-top: 188px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
  }
  .title{
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }
</style>
